<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/igrid/customRenderer.js" charset="utf-8"></script>
<style type="text/css">
h5{font-size: 13px; font-weight: normal; line-height: 13px; float: right;}
h6{font-size: 13px; color: red; float: left; line-height: 13px;}
.showClew{font-size: 12px; color: olive;}
.showClew span{color: peru;}
.spanShow{color: peru;}
</style>
<div id="customRendererDemo">
	<!-- Demo区 -->
	<div title='上传下载' tabid='tab1'>
        <span class="showClew">备注：</span><br><br>
		<div class="ccay-grid">
			<div id="tbrUpload" class="ccay-grid-toolbar">
				<span id="btnUploadDel" class="ccay-button" >
					<a class="ccay-icon pre-del"></a>
					<label>delete</label>
				</span>
				<span id="btnUploadUndoDel" class="ccay-button" >
					<a class="ccay-icon undel"></a>
					<label>undo delete</label>
				</span>
				<span id="btnUploadAdd" class="ccay-button" >
					<a class="ccay-icon add"></a>
					<label>insert</label>
				</span>
				<span id="btnUploadSave" class="ccay-button" >
					<a class="ccay-icon save"></a>
					<label>save</label>
				</span>
		 	</div>
		 	<div id="grdUpload"></div>
		</div>
    	<h3>html Code</h3>
	  	<span></span>
	  	<div class="codeArea">
			<pre id='html1'>
&lt;div id="grdUpload">&lt;/div>
			</pre>
		</div>
		<h3>js Code</h3>
      	<span></span>
      	<div class="codeArea">
      		<pre id='js1'>
var gridOption = {
	height: 400,
	editMode: true,
	wrapHead: false,
	colsort: false,
	wrap: true,
    columns: [
    	{columnType: 'select', multi: true},
 		{field: 'name', valueField: "card", width:150, header: "ccay.common.label.userAccount", type: "ldap", rule: {required: true}},
 		{field: 'sex', width:75, header: "ccay.security.role.valid", type: 'bool', format: {isIcon: true}},
 		{field: 'phone', width:300, header: "ccay.cms.label.attachment", editable: false, sortable: false, renderer: Ccay.example.ui.igird.customRenderer.uploadRender},
 		{field: 'lastUpdateDate', width:130, header: "ccay.common.label.lastUpdatedDate", type: 'datetime', editable: false}
    ],
	ajax:{
	   	url: 'services/ccay/demo/student/list/page/${pageSize}/${curPage}/${orderBy}'
	},
    operation: {
    	del: {
    		btn: '#btnUploadDel',
    		undoBtn: '#btnUploadUndoDel'
    	},
    	insert: {
    		btn: '#btnUploadAdd',
    		copy: true,
    		clear: ['id', 'name', 'lastUpdateDate'],
    		defaultRow: {sex: 1, blog: 'http://'}
    	},
    	save: {
    		btn: '#btnUploadSave',
    		ajax: {
    			url: "services/ccay/demo/student/batch"
    		}
    	}
    }
};

$S("#grdUpload").igrid(gridOption);

// 附件列渲染
page.uploadRender = function (value, data, col, grid, colNo, rowNo) {
	return value ? page.showAttachment(value, rowNo) : '&lt;span class="ccay-button" onclick={1}>&lt;a class="ccay-icon upload">&lt;/a>&lt;label>{0}&lt;/label>&lt;/span>'.format([$i18n("ccay.common.label.attachmentUpload"), "Ccay.example.ui.igird.customRenderer.uploadAttachment('{0}')".format(rowNo)]);
};

// 显示附件
page.showAttachment = function (batchId, rowNo) {
	var files = [];
	Ccay.Core.ajax({
		async: false,
		url: "services/ccay/demo/attachment/biz/single/withurl",
		data: {attachmentBatchId: batchId},
		success: function (result) {
			var attachments = result && result.attachments;
			if (attachments && attachments.length) {
				$.each(attachments, function (aIdx, attachment) {
					attachment.rowIdx = rowNo;
					files.push("&lt;div>&lt;a style='text-decoration: underline;' href='${#downloadUrl}'>${#fileName}&lt;/a>&lt;a class='ccay-icon del' onclick='Ccay.example.ui.igird.customRenderer.deleteAttachment(\"${#deleteUrl}\", this, \"${#rowIdx}\")'>&lt;/a>&lt;/div>".formatField(attachment));
				});
			}
		}
	});
	return files.join("");
};

// 上传附件
page.uploadAttachment = function (rowIdx) {
	var param = {
		uploadType: "Attachment",
		completeCallback: page.uploadComplete,
		userObject: {rowIdx: rowIdx},
		needBatchId: true,
		closeDialog: true,
		query: "attType=AttachmentDemo"
	};
	Ccay.Component.openUploadDialog("ccay.common.label.attachmentUpload", param);
};

// 上传附件完成
page.uploadComplete = function (attachments, batchId, userObject) {
	var grdUploadMag = $S("#grdUpload").manager(),
		uploadCol = grdUploadMag.getCellByField(userObject.rowIdx, "phone"),
		rowData = grdUploadMag.getRowData(uploadCol);
	uploadCol.html(page.showAttachment(batchId, userObject.rowIdx));
	rowData["phone"] = batchId;
	page.saveAttachment(rowData, false);
};

// 保存附件
page.saveAttachment = function (rowData, isDelete) {
	var data = {items2Create: [], items2Delete: [], items2Update: []};
	isDelete ? data.items2Delete.push(rowData) : data.items2Update.push(rowData);
	Ccay.doPut("services/ccay/demo/student/batch", data);
};

// 删除附件
page.deleteAttachment = function (url, aDom, rowNo) {
	Ccay.doDelete(url, null, function() {
		var fileDom = $(aDom).parent(), colDom = fileDom.parent();
		fileDom.remove();
		if (!colDom.html()) {
			colDom.html('&lt;span class="ccay-button" onclick={1}>&lt;a class="ccay-icon upload">&lt;/a>&lt;label>{0}&lt;/label>&lt;/span>'.format([$i18n("ccay.common.label.attachmentUpload"), "Ccay.example.ui.igird.customRenderer.uploadAttachment('{0}')".format(rowNo)]));
			var rowData = $S("#grdUpload").manager().getRowData(colDom);
			rowData["phone"] = null;
			page.saveAttachment(rowData, true);
		}
	});
};
      		</pre>
      	</div>
    </div>
    
    <div title='上传下载2' tabid='tab2'>
        <span class="showClew">备注：</span><br><br>
		<div class="ccay-grid">
			<div id="tbrUpload" class="ccay-grid-toolbar">
				<span id="btnUploadDel2" class="ccay-button" >
					<a class="ccay-icon pre-del"></a>
					<label>delete</label>
				</span>
				<span id="btnUploadUndoDel2" class="ccay-button" >
					<a class="ccay-icon undel"></a>
					<label>undo delete</label>
				</span>
				<span id="btnUploadAdd2" class="ccay-button" >
					<a class="ccay-icon add"></a>
					<label>insert</label>
				</span>
				<span id="btnUploadSave2" class="ccay-button" >
					<a class="ccay-icon save"></a>
					<label>save</label>
				</span>
		 	</div>
		 	<div id="grdUpload2"></div>
		</div>
    	<h3>html Code</h3>
	  	<span></span>
	  	<div class="codeArea">
			<pre id='html1'>
&lt;div id="grdUpload2">&lt;/div>
			</pre>
		</div>
		<h3>js Code</h3>
      	<span></span>
      	<div class="codeArea">
      		<pre id='js1'>
var gridOption2 = {
	height: 400,
	editMode: true,
	wrapHead: false,
	colsort: false,
	wrap: true,
    columns: [
    	{columnType: 'select', multi: true},
 		{field: 'name', valueField: "card", width:150, header: "ccay.common.label.userAccount", type: "ldap", rule: {required: true}},
 		{field: 'sex', width:75, header: "ccay.security.role.valid", type: 'bool', format: {isIcon: true}},
 		{field: 'phone', width:300, header: "ccay.cms.label.attachment", editable: false, sortable: false, renderer: Ccay.example.ui.igird.customRenderer.uploadRender},
 		{field: 'lastUpdateDate', width:130, header: "ccay.common.label.lastUpdatedDate", type: 'datetime', editable: false}
    ],
	ajax:{
	   	url: 'services/ccay/demo/student/list/page/${pageSize}/${curPage}/${orderBy}'
	},
    operation: {
    	del: {
    		btn: '#btnUploadDel2',
    		undoBtn: '#btnUploadUndoDel2'
    	},
    	insert: {
    		btn: '#btnUploadAdd2',
    		copy: true,
    		clear: ['id', 'name', 'lastUpdateDate'],
    		defaultRow: {sex: 1, blog: 'http://'}
    	},
    	save: {
    		btn: '#btnUploadSave2',
    		ajax: {
    			url: "services/ccay/demo/student/batch"
    		}
    	}
    }
};

$S("#grdUpload2").igrid(gridOption2);

page.P2 = {
		uploadRender : function(data,rowNo){
			rowNo = data._newIndex || rowNo;
			var value = data.phone;
			return value ? this.showAttachment(value, rowNo) : '&lt;span class="ccay-button" onclick={1}>&lt;a class="ccay-icon upload">&lt;/a>&lt;label>{0}&lt;/label>&lt;/span>'.format([$i18n("ccay.common.label.attachmentUpload"), "Ccay.example.ui.igird.customRenderer.P2.uploadAttachment('{0}')".format(rowNo)]);
		},
		showAttachment : function (batchId, rowNo) {
			var files = [];
			Ccay.Core.ajax({
				async: false,
				url: "services/ccay/demo/attachment/biz/single/withurl",
				data: {attachmentBatchId: batchId},
				success: function (result) {
					var attachments = result && result.attachments;
					if (attachments && attachments.length) {
						$.each(attachments, function (aIdx, attachment) {
							attachment.rowIdx = rowNo;
							files.push("&lt;div>&lt;a style='text-decoration: underline;' href='${#downloadUrl}'>${#fileName}&lt;/a>&lt;a class='ccay-icon del' onclick='Ccay.example.ui.igird.customRenderer.P2.deleteAttachment(\"${#deleteUrl}\", this, \"${#rowIdx}\")'>&lt;/a>&lt;/div>".formatField(attachment));
						});
					}
				}
			});
			return files.join("");
		},
		uploadAttachment : function(rowIdx){
			var param = {
				uploadType: "Attachment",
				completeCallback: Ccay.example.ui.igird.customRenderer.P2.uploadComplete,
				userObject: {rowIdx: rowIdx},
				needBatchId: true,
				closeDialog: true,
				query: "attType=AttachmentDemo"
			};
			Ccay.Component.openUploadDialog("ccay.common.label.attachmentUpload", param);
		},
		uploadComplete : function (attachments, batchId, userObject) {
			var grdUploadMag = $S("#grdUpload2").manager(),
				uploadCol = grdUploadMag.getCellByField(userObject.rowIdx, "phone"),
				rowData = grdUploadMag.getRowData(uploadCol);
			if(!rowData._inserted && !rowData._deleted){
				uploadCol.addClass("cell-update");
				rowData._updated = true;
			}
			uploadCol.html(page.P2.showAttachment(batchId, userObject.rowIdx));
			rowData["phone"] = batchId;
		},
		deleteAttachment : function (url, aDom, rowNo) {
			Ccay.doDelete(url, null, function() {
				var fileDom = $(aDom).parent(), colDom = fileDom.parent();
				fileDom.remove();
				if (!colDom.html()) {
					colDom.html('&lt;span class="ccay-button" onclick={1}>&lt;a class="ccay-icon upload">&lt;/a>&lt;label>{0}&lt;/label>&lt;/span>'.format([$i18n("ccay.common.label.attachmentUpload"), "Ccay.example.ui.igird.customRenderer.P2.uploadAttachment('{0}')".format(rowNo)]));
					var rowData = $S("#grdUpload2").manager().getRowData(colDom);
					if(!rowData._inserted && !rowData._deleted){
						colDom.addClass("cell-update");
						rowData._updated = true;
					}
					rowData["phone"] = null;
				}
			});
		}
	};
      		</pre>
      	</div>
    </div>
	 
	 <!-- FAQ区 -->
	 <div title="FAQ">
		  <form class="init ccay-form">
		    <div class="ccay-form-body">
		    <ul>
		    	<li class="ccay-form-row">
			      <samp><h3>问题</h3></samp>
			      <span class="ccay-form-input">
			               <h3>解决方案</h3>
			      </span>
			    </li>
		    </ul>
			</div>     
			<div class="ccay-form-custom">
			    <ul>                     
			        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
			        <li class="ccay-form-row">
			                          <samp class="i18n" i18nKey=""></samp>                          
			                         <span class="ccay-form-input"></span>
			        </li>  
			    </ul>
			</div>
		  </form>                    
    </div> 
</div>